import React, { PureComponent } from 'react';
import { Menu, Dropdown, Avatar, Icon, Spin } from 'antd';
import styles from './index.less';

export default class GlobalHeaderRight extends PureComponent {
  render() {
    const {
      currentUser,
      onMenuClick,
      theme
    } = this.props;

    const menu = (
      <Menu className={styles.menu} onClick={onMenuClick}>
        <Menu.Item key="userInfo">
          <Icon type="setting" />个人设置
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <Icon type="logout"/>退出登陆
        </Menu.Item>
      </Menu>
    )

    let className = styles.right;
    if(theme === 'dark') {
      className = `${styles.right} ${styles.dark}`;
    }

    return (
      <div className={className}>
        {currentUser.name ? (
          <Dropdown overlay={menu}>
              <span calssName={`${styles.action} ${styles.account}`}>
                  <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar"/>
                  <span className={styles.name}>{currentUser.name}</span>
              </span>
          </Dropdown>
        ) : (
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        )}
      </div>
    );
  }
}
